<template>
  <div class="category">
    <Navbar />
    <!-- 搜索框 -->
    <van-search
      v-model="searchIpt"
      shape="round"
      placeholder="网络机顶盒"
    >
      <template #left>
        <van-icon name="arrow-left" color="#71737C" size="2rem" @click="$router.back()" />
      </template>
    </van-search>
    <!-- 侧边栏 -->
    <div class="cont">
      <div class="left">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item v-for="item in cateData" :key="item._id" :title="item.cate_zh" />
        </van-sidebar>
      </div>
    <!-- 右侧栏 -->
      <div class="right">
        <NoData  :isShow="!isShow" fontSize="18"/>
        <van-grid :column-num="3"  :border='false'>
          <van-grid-item v-for="value in cache[this.activeKey]" :key="value._id" @click="rightShop(value._id)">
            <template>
                <div class="grid-item">
                <img :src="$api.baseImg + value.img">
                <div v-text="value.name"></div>
              </div>
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>

  </div>
</template>

<script>
import {Navbar, NoData} from '@/components'
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  name: 'Category',
  components: {
    Navbar,
    NoData
  },
  data() {
    return {
      activeKey: 0,
      searchIpt: '',
      cateData: [],
    }
  },
  computed: {
    ...mapState('goods', ['cache']),
    payload() {
      return {
        k: this.activeKey,
        cate: this.cateData[this.activeKey].cate
      }
    },
    isShow() {
      // console.log(this.cache[this.activeKey]);
      return (this.cache[this.activeKey] && this.cache[this.activeKey].length !== 0);
    }
  },
  watch: {
    activeKey() {
      if(!this.cache[this.activeKey]) {
        this.getCacheDate(this.payload);
      }
    }
  },
  // async mounted(){
  //   const res = await this.$api.cateGoods({});
  //   this.cateData = res.list;
  //   this.getCacheDate(this.payload);
  //   // console.log(this.cache);
  // },
  async activated() {
    const res = await this.$api.cateGoods({});
    console.log(res);
    this.cateData = res;
    this.getCacheDate(this.payload);
    // console.log(this.cache);
  },
  // 组件销毁注意 清除缓存
  // beforeDestroy() {
  //   // 同步任务销毁即可
  //   this.destoryCache() 
  // },
  deactivated() {
    if(!this.$route.path.includes('/good/detail/')) {
      this.destoryCache();
    }
  },
  methods: {
    ...mapActions('goods', ['getCacheDate']),
    ...mapMutations('goods', ['destoryCache']),
    onChange(id) {
      console.log(id);
    },
    rightShop(id){
      this.$router.push('good/detail/'+ id);  
    }
  }

}
</script>

<style scoped lang="scss">
.category {
  .van-sidebar {
    width: 8.5rem;
  }
  .van-sidebar-item {
    text-align: center;
    height: 4.6rem;
    padding: 0;
    line-height: 4.6rem;
  }
 .van-sidebar-item--select {
    border-right: 1px solid #eee;
    color: red;
    &::before {
      width: 0;
      height: 0;
    }
  }
  .cont {
    display: flex;
  }
    .left {
    position: absolute;
    left: 0;
    top: 4.4rem;
    bottom: 6rem;
    width: 8.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    .van-sidebar-item--select {
      color: red;
    }
    .van-sidebar-item--select::before {
      width: 0;
      height: 0;
    }
  }
  .right {
    position: absolute;
    left: 8.5rem;
    top: 4.4rem;
    bottom: 6rem;
    right: 0;
    overflow: auto;
    background-color: white;
    .grid-item {
      img {
        display: block;
        margin: 0 auto;
        width: 7rem;
        height: 7rem;
      }
      font-size: .32rem;
      text-align: center;
      color: #333333;
    }
  }

}
</style>